<template>
  <div>
<Dog v-for="(item,index) in arr" :key="index" :url="item.dogImgUrl"
:name="item.dogName" :index="index" @like="fn"/>
<p>你喜欢的狗是：</p>
<ul>
  <li v-for="(item,ind) in arr1" :key="ind">
{{item}}
  </li>
</ul>
  </div>
</template>

<script>
import Dog from './components/Dog.vue'
export default {
  methods:{
   fn(index){
     this.arr1.push(this.arr[index].dogName)
  },
  },
  components:{
    Dog
  },
  data(){
    return {
      arr: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=4140027776,3873388994&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=473",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=1556404728,37985651&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=2355614037,1438309973&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img2.baidu.com/it/u=1997657337,1292431187&fm=253&fmt=auto&app=138&f=JPEG?w=779&h=500",
          dogName: "萨摩耶",
        },
      ],
      arr1:[]
    }
  }
}
</script>

<style>

</style>